<template>
	<view class="content">
		<zx-head Title="开始实验" :isShowR="false"></zx-head>
		<view class="title-box">
			{{topic.experimentName}}
		</view>
		<view class="info">
			{{topic.experimentNotes}}
		</view>
		<view class="info">
			{{topic.experimentTextContent}}
		</view>

		<view class="video-box" v-if="anneType != ''">
			<video v-if="anneType == 'video'" :src="srcData"></video>
			<image v-else-if="anneType == 'image'" :src="srcData"></image>
			<video v-else-if="anneType == 'audio'" :src="srcData"></video>
		</view>
		<u-form :model="form" label-position="top" ref="uForm" class="form">
			<view v-if="topics != null && topics[0] != null">
				<view class="title">{{topic.questionTitle}} | {{topic.questionType}}</view>
				<radio v-for="dom in topics">
					{{dom.optionLetter}} : {{dom.optionContent}} 
				</radio>
			</view>
			<u-form-item :border-bottom="false" label="描述内容" prop="content" v-else>
				<u-input placeholder="请输入您的描述。" :height="150" :auto-height="true" type="textarea"></u-input>
			</u-form-item>
		</u-form>
		<view class="startBtn _df _ac _jc" @click="doStart">
			<!-- <image src="@/static/img/index/zxIcon5.png" mode=""></image> -->
			开始实验
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				pageList: [],
				page: {
					pageParam: {
						pageNum: 1,
						pageSize: 10,
					}
				},
				topic: {},
				topics: [],
				anneType: "",
				token: "",
				strId: "",
				id: "",
				srcData: "https://ynuzxapi.healthycare.space/admin/app/businessFile/download?id=${id}&fieldName=${fieldName}&asImage=${asImage}&filename=${filename}&MenuId=1791770339538112512&Authorization=",
			};
		},
		onLoad(options) {

			if (options.strId) {
				this.strId = options.strId
				this.id = options.id
			}
			this.getTopic()
		},
		onShow() {

		},
		methods: {
			back() {
				uni.navigateBack(-1)
			},
			doStart(){
				
			},
			getTopic() {
				let thisData = this;
				let data = {
					"url": "/admin/app/semSingleExperiment/view?id=" + thisData.id,
					"data": null
				}
				uni.$_post({
					url: "getRequestResult",
					that: thisData,
					params: data,
					success(res) {
						thisData.getZXToken()
						if (res.code == 0) {
							let dataDom = res.data.data
							thisData.topic = dataDom;
							thisData.getTextList();
							thisData.getPageList();
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon: 'error'
						});
					},
				});
			},
			getPageList() {
				let thisData = this;
				let data = {
					"url": "/admin/app/businessFile/list",
					"data": {
						"orderParam": [{
							"asc": false,
							"dateAggregateBy": "",
							"fieldName": "createTime"
						}],
						"businessFileDtoFilter": {
							"bindStrId": thisData.strId
						}
					}
				}
				uni.$_post({
					url: "getRequestResult",
					that: thisData,
					params: data,
					success(res) {
						if (res.code == 0) {
							let _data = res.data.data.dataList;
							if (_data != null && _data[0] != null) {
								let json = JSON.parse(_data[0].fileJson);
								thisData.srcData = thisData.srcData.replace("${id}", _data[0].id)
									.replace("${fieldName}", json.fieldName)
									.replace("${asImage}", json.asImage)
									.replace("${filename}", json.filename) + thisData.token;

								thisData.anneType = _data[0].fileType.includes("image") ? 'image' : _data[0]
									.fileType.includes("video") ? 'video' : _data[0].fileType.includes("audio") ?
									'audio' : ''
							} 

						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon: 'error'
						});
					},
				});
			},
			getTextList() {
				let thisData = this;
				let data = {
					"url": "/admin/app/semExperimentQuestionOptions/list",
					"data": {
						"orderParam": [{
							"asc": true,
							"dateAggregateBy": "",
							"fieldName": "optionLetter"
						}],
						"pageParam": {
							"pageNum": 1,
							"pageSize": 100
						},
						"semExperimentQuestionOptionsDtoFilter": {
							"singleExperimentId": thisData.id
						}
					}

				}
				uni.$_post({
					url: "getRequestResult",
					that: thisData,
					params: data,
					success(res) {
						if (res.code == 0) {
							thisData.topics = res.data.data.dataList;
							console.log(thisData.topics);
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon: 'error'
						});
					},
				});
			},
			getZXToken() {
				let thisData = this;
				uni.$_get({
					url: "getZXToken",
					that: thisData,
					success(res) {
						if (res.code == 0) {
							thisData.token = thisData.token + res.data;
						} else {
							uni.showToast({
								title: "知心获取token异常！",
								duration: 1500,
								icon: 'error'
							});
						}
					}
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 40rpx;

		.back {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.video-box {
			width: 100%;
			border-radius: 20rpx;
			height: 340rpx;
			position: relative;
			overflow: hidden;

			// &:before{
			// 	display: block;
			// 	content: '';
			// 	width: 100%;
			// 	height: 100%;
			// 	background: rgba(0,0,0,0.25) url(@/static/img/index/play1.png) no-repeat center center / 120rpx 120rpx;
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	z-index: 2;
			// }
			video {
				width: 100%;
				height: 100%;
			}
		}
		.title-box{
			text-align: center;
			font-size: 30rpx;
			color: #000;
			font-family: $uni-font-family-Bold;
			padding: 30rpx 0;
			// margin-bottom: 20rpx;
		}
		.info{
			font-size: 24rpx;
			color: #666;
			line-height: 36rpx;
		}
		.startBtn {
			width: 690rpx;
			height: 100rpx;
			background: #5a64c5;
			border-radius: 50rpx;
			color: #fff;
			font-size: 32rpx;
			position: fixed;
			bottom: 80rpx;
			left: 30rpx;
			z-index: 2;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>